<template>
	<view class="parent-box">
		<view class="tab-box">
			<text :class="['tab',activeIndex==0?'active':'']" @click="changeTab(0)"> 签到 </text>
			<text :class="['tab',activeIndex==1?'active':'']" @click="changeTab(1)">签到记录</text>
		</view>
		<view class="content-box">
			<ClockIn v-show="activeIndex==0" :cid="cid" :longitude="longitude" :latitude="latitude"
				:checkInId.sync="checkInId" :address="address" :cname="cname" :system="system"></ClockIn>
			<ClockInRecord v-if="activeIndex==1" :cname="cname" :cid="cid" ref="clockInRecordRef"></ClockInRecord>
		</view>
	</view>
</template>

<script>
	import ClockIn from '../components/clockIn.vue'
	import ClockInRecord from '../components/clockInRecord.vue'

	export default {
		components: {
			ClockIn,
			ClockInRecord
		},
		data() {
			return {
				activeIndex: 0,
				cid: null, //客户id
				cname: null,
				longitude: null, //客户经纬度
				latitude: null,
				checkInId: null,
				system: null,
				address: ''
			}
		},
		watch: {

		},
		onShow() {
			// alert("对对对")
			this.$nextTick(() => {
				this.$refs.clockInRecordRef?.refresh()
			})


		},
		onLoad: function(option) {
			this.cid = option.id
			this.longitude = option.longitude
			this.latitude = option.latitude
			this.checkInId = option.checkInId
			this.address = option.address
			this.cname = option.cname
			this.system = option.system
		},
		methods: {
			changeTab(index) {
				this.activeIndex = index
			},
			changeCheckInId(checkInId) {
				this.checkInId = checkInId
			}

		}
	}
</script>

<style scoped lang="scss">
	.parent-box {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.tab-box {
		border-bottom: 4rpx solid #D2D2D2;
		margin-top: 20rpx;

		.tab {
			display: inline-block;
			padding: 16rpx 12rpx;
			margin: 0 10rpx;
			font-size: 28rpx;
			// font-weight: 600;

			&.active {
				border-bottom: 6rpx solid #0C7AF7;
			}
		}
	}

	.content-box {
		flex: 1;
	}
</style>